<template>
  <div>
    <el-tree :data="newList" :props="{label:'name'}" />
  </div>
</template>
<script>
export default {
  data() {
    return {
      list: [
        { name: '广东', id: 1, pid: '' },
        { name: '广州', id: 2, pid: 1 },
        { name: '深圳', id: 3, pid: 1 },
        { name: '宝安', id: 4, pid: 3 },
        { name: '广西', id: 5, pid: '' },
        { name: '石岩', id: 6, pid: 4 }
      ],
      newList: []
    }
  },
  created() {
    this.newList = this.changeData(this.list, '')
    // 1:只取到第一层数据
    // 2:将pid写成变量形参
    // 3:给找出来的项加一个children=[]
    // 4:使用递归找出子集，子集的pid是自己的id
  },
  methods: {
    // 树形数据转换
    changeData(arr, pid) {
      return arr.filter(item => {
        if (item.pid === pid) {
          // 这个地方的item
          item.children = this.changeData(arr, item.id)
          return true
        }
      })
    }
  }
}
</script>
<style>
</style>
